
"use client";
interface InputProps {
    id: string
    onChange: (value: string) => void
    value: string
    label: string;
    type?: string;
}

export const Input = ({
    id, onChange, value, label, type,
}: InputProps) => {
    return (<div className="relative">
        <input
            id={id}

            type={type}
            onChange={(e) => onChange(e.target.value)}
            value={value}
            className="block rounded-md px-6 pt-6 pb-1 w-full text-md  text-white  bg-neutral-700 appearance-none  focus:ring-0 peer "
            placeholder={""}
        />
        <label
            className="absolute text-md text-zinc-400 duration-150 transform -translate-y-3 scale-75 top-4 z-10 origin-[0] left-6 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-3 peer-focus:scale-75"
            htmlFor={id}
        >
            {label}
        </label>
    </div>)
}